<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 500px;
            height: 20px;
            background-color: #ccc;
            border-radius: 10px;
            overflow: hidden;
        }

        #sec {
            width: 0px;
            background-color: #f66;
        }
    </style>
</head>

<body>
    <!-- 播放音乐的标签 -->
    <audio src=""></audio>
    <!-- 播放视频用的 -->
    <!-- <video src=""></video> -->

    <button onclick="play()">播放</button>
    <button onclick="pause(event)">暂停</button>
    <button onclick="changeClick(10010)">上一曲</button>
    <button onclick="changeClick(10011)">下一曲</button>
    <button onclick="changeClick(10012)">随机播放</button>
    <button onclick="volumeClick(10010)">音量+</button>
    <button onclick="volumeClick(10011)">音量-</button>
    <button>循环播放</button>

    <br>

    <h2>歌名-歌手</h2>
    <!-- 播放进度 -->
    <div>
        <div id="sec"></div>
    </div>
    <!-- 播放时间 -->
    <p></p>
    <!-- 是否正在播放 -->
    <b></b>
    <br>
    <!-- 音量 -->
    <span>音量：50</span>
    <br>
    <!-- 图片 -->
    <img src="" alt="">

</body>
<script>
    const audio = document.querySelector('audio')
    const img = document.querySelector('img')
    const h2 = document.querySelector('h2')
    const p = document.querySelector('p')
    const b = document.querySelector('b')
    const span = document.querySelector('span')

    // 当前播放的索引值
    let current = 0
    // 默认音量
    let volumeNum = 50
    // 设置默认音量
    audio.volume = volumeNum / 100

    // 是否单曲循环
    let is = false

    // 相当于在服务器请求的数组
    const list = [
        {
            name: '水中花',
            src: './mp3/水中花.mp3',
            singer: '郁可唯',
            img: 'https://gimg3.baidu.com/search/src=https%3A%2F%2Favatar.bdstatic.com%2Fit%2Fu%3D893260370%2C2531979274%26fm%3D3012%26app%3D3012%26autime%3D1747889490%26size%3Db360%2C360&refer=http%3A%2F%2Fwww.baidu.com&app=2021&size=w931&n=0&g=0n&q=75&fmt=auto?sec=1749574800&t=cd9d0d8f00062288dc51f939854af3c5'
        },
        {
            name: '鬼迷心窍',
            src: './mp3/鬼迷心窍.mp3',
            singer: '李宗盛',
            img: 'https://gimg3.baidu.com/yule/src=http%3A%2F%2Fgips1.baidu.com%2Fit%2Fu%3D3851819579%2C1296985703%26fm%3D3007%26app%3D3007%26f%3DJPEG%3Fw%3D500%26h%3D500&refer=http%3A%2F%2Fwww.baidu.com&app=2019&size=w931&n=0&g=0n&q=75&fmt=auto?sec=1749574800&t=0cbb058b27789bb0c62745501118ffb1'
        },
        {
            name: '海阔天空',
            src: './mp3/海阔天空.mp3',
            singer: '黄家驹',
            img: 'https://t9.baidu.com/it/u=610870592,2834543084&fm=3035&app=3035&size=re3,2&q=75&n=0&g=4n&f=JPEG&fmt=auto&maxorilen2heic=2000000?s=EAB866C84E426D55109EC412030000DB'
        },
        {
            name: '你的答案',
            src: './mp3/你的答案.mp3',
            singer: '我',
            img: 'https://gimg3.baidu.com/yule/src=http%3A%2F%2Fgips1.baidu.com%2Fit%2Fu%3D1156225043%2C1852797018%26fm%3D3007%26app%3D3007%26f%3DJPEG%3Fw%3D300%26h%3D300&refer=http%3A%2F%2Fwww.baidu.com&app=2019&size=w931&n=0&g=0n&q=75&fmt=auto?sec=1749574800&t=1365ca7d7f7a8894c15b6c5ffb9b17a3'
        },
        {
            name: '雅俗共赏',
            src: './mp3/雅俗共赏.mp3',
            singer: '许嵩',
            img: 'https://t8.baidu.com/it/u=3226607012,456820635&fm=3035&app=3035&size=re3,2&q=75&n=0&g=4n&f=JPEG&fmt=auto&maxorilen2heic=2000000?s=F624D54FC67A279E792CD92903001050'
        }

    ]



    function play() {

        // 获取要播放的歌曲
        const mp3 = list[current]

        // 显示图片
        img.src = mp3.img
        // 显示歌名和歌手名
        h2.innerText = mp3.name + '-' + mp3.singer
        // 加载音频
        audio.src = mp3.src
        // 播放
        audio.play()

    }
    // 暂停或者继续播放
    function pause(event) {
        // console.log(1111, audio.paused);
        // console.log(event);

        if (audio.paused) {
            // 当前状态-暂停
            // 继续播放方法
            audio.play()
            event.target.innerText = '暂停'
        } else {
            // 当前状态-播放
            // 暂停的方法
            audio.pause()
            event.target.innerText = '继续'
        }


        // console.log(2222, audio.paused);
    }

    // 切歌
    function changeClick(type) {

        // 单曲循环的时候重新播放即可
        if (is) {
            play()
            return
        }

        if (type == 10010) {
            // 上一曲,如果是第一首就播放最后一首
            current = current > 0 ? --current : list.length - 1
            play()
        } else if (type == 10011) {
            // 下一曲，如果是最后一首就播放第一首
            // current++
            current = current < list.length - 1 ? ++current : 0
            play()
        } else if (type == 10012) {
            // 随机播放
            current = Math.floor(Math.random() * list.length)
            play()
        }
    }

    // 切换音量
    function volumeClick(type) {
        // console.log(audio.volume);
        // audio.volume = 1
        if (type == 10010) {
            // ++++++
            // volumeNum += 5
            volumeNum = volumeNum < 96 ? volumeNum + 5 : 100
        } else {
            // ------
            // volumeNum -= 5
            volumeNum = volumeNum > 5 ? volumeNum - 5 : 0
        }

        audio.volume = volumeNum / 100

        span.innerText = '音量：' + volumeNum + '%'
    }

    // 播放时间变化
    audio.ontimeupdate = function () {
        // console.log(audio.currentTime, audio.duration);
        // 当前时间
        const currentTime = parseInt(audio.currentTime)
        // 总时间
        const duration = parseInt(audio.duration)
        p.innerText = formatTime(currentTime) + '/' + formatTime(duration)

        if (currentTime == duration) {
            // 播放结束，就播放下一首
            changeClick(10010)
        }

        // document.querySelector('#sec') 找到 div 
        // .style   设置标签的样式
        // .width   设置宽度
        // currentTime / duration * 100 + '%' 值
        document.querySelector('#sec').style.width = currentTime / duration * 100 + '%'
    }

    // 格式化时间的方法
    function formatTime(second) {
        // 将秒数转换成整数
        const time = parseInt(second)

        // 得到分钟数
        let m = parseInt(time / 60)
        // 得到秒数
        let s = time % 60

        s = s < 10 ? '0' + s : s
        m = m < 10 ? '0' + m : m

        return m + ':' + s
    }

</script>

</html>